<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>订单详情 - 优选商城</title>
    <style>
        .order-info {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
        }
        .order-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        .order-item:last-child {
            border-bottom: none;
        }
        .order-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }
        .order-status {
            padding: 10px 15px;
            border-radius: 5px;
            display: inline-block;
            font-weight: 500;
        }
        .status-unpaid {
            background-color: #fff3cd;
            color: #856404;
        }
        .status-paid {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        .status-shipped {
            background-color: #d4edda;
            color: #155724;
        }
        .status-completed {
            background-color: #cce5ff;
            color: #004085;
        }
        .status-canceled {
            background-color: #f8d7da;
            color: #721c24;
        }
        .order-timeline {
            position: relative;
            padding-left: 30px;
            margin-top: 30px;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 30px;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #0d6efd;
            z-index: 1;
        }
        .timeline-item:after {
            content: '';
            position: absolute;
            left: -21px;
            top: 20px;
            width: 2px;
            height: calc(100% - 20px);
            background-color: #dee2e6;
        }
        .timeline-item:last-child:after {
            display: none;
        }
        .timeline-date {
            font-size: 0.85rem;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container my-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item"><a href="/user/orders">我的订单</a></li>
                    <li class="breadcrumb-item active" aria-current="page">订单详情</li>
                </ol>
            </nav>
            
            <div th:if="${order != null}">
                <!-- 订单状态 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h5 class="mb-0">订单号: <span th:text="${order.orderNo}">20250607123456</span></h5>
                                <p class="text-muted mb-0">
                                    下单时间: <span th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</span>
                                </p>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <span th:class="${order.status == 10 ? 'order-status status-unpaid' : 
                                                order.status == 20 ? 'order-status status-paid' : 
                                                order.status == 30 ? 'order-status status-shipped' : 
                                                order.status == 40 ? 'order-status status-completed' : 
                                                'order-status status-canceled'}"
                                      th:text="${order.statusDesc}">
                                    订单状态
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 订单操作 -->
                <div class="card mb-4" th:if="${order.status == 10}">
                    <div class="card-body text-center">
                        <h5 class="card-title text-danger mb-3">该订单尚未支付</h5>
                        <a th:href="@{'/order/pay/' + ${order.orderNo}}" class="btn btn-primary me-2">去支付</a>
                        <button class="btn btn-outline-danger" onclick="cancelOrder()">取消订单</button>
                    </div>
                </div>
                
                <!-- 收货地址 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">收货信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>收货人: </strong>
                                    <span th:text="${order.shippingAddress?.receiver}">收件人</span>
                                </p>
                                <p class="mb-1">
                                    <strong>联系电话: </strong>
                                    <span th:text="${order.shippingAddress?.phone}">电话</span>
                                </p>
                                <p class="mb-0">
                                    <strong>收货地址: </strong>
                                    <span th:text="${order.shippingAddress?.province} + ' ' + 
                                                  ${order.shippingAddress?.city} + ' ' + 
                                                  ${order.shippingAddress?.district} + ' ' + 
                                                  ${order.shippingAddress?.detail}">
                                        详细地址
                                    </span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>订单金额: </strong>
                                    <span class="text-danger">¥<span th:text="${#numbers.formatDecimal(order.payment, 1, 2)}">0.00</span></span>
                                </p>
                                <p class="mb-1">
                                    <strong>支付方式: </strong>
                                    <span>在线支付</span>
                                </p>
                                <p class="mb-0">
                                    <strong>支付时间: </strong>
                                    <span th:text="${order.paymentTime != null ? #temporals.format(order.paymentTime, 'yyyy-MM-dd HH:mm:ss') : '未支付'}">
                                        支付时间
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品信息 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">商品信息</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>商品</th>
                                        <th>单价</th>
                                        <th>数量</th>
                                        <th>小计</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="item : ${order.orderItems}">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img th:src="${item.productImage}" class="img-thumbnail me-3" 
                                                     th:alt="${item.productName}" style="width: 60px; height: 60px; object-fit: cover;">
                                                <div>
                                                    <h6 class="mb-0" th:text="${item.productName}">商品名称</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>¥<span th:text="${#numbers.formatDecimal(item.currentPrice, 1, 2)}">0.00</span></td>
                                        <td th:text="${item.quantity}">1</td>
                                        <td class="text-danger">¥<span th:text="${#numbers.formatDecimal(item.totalPrice, 1, 2)}">0.00</span></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="text-end">
                                            <strong>商品总额:</strong>
                                        </td>
                                        <td class="text-danger">
                                            ¥<span th:text="${#numbers.formatDecimal(order.payment, 1, 2)}">0.00</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-end">
                                            <strong>运费:</strong>
                                        </td>
                                        <td>
                                            ¥<span th:text="${#numbers.formatDecimal(order.postage, 1, 2)}">0.00</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-end">
                                            <strong>实付金额:</strong>
                                        </td>
                                        <td class="text-danger fw-bold">
                                            ¥<span th:text="${#numbers.formatDecimal(order.payment.add(order.postage), 1, 2)}">0.00</span>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 订单进度 -->
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">订单进度</h5>
                    </div>
                    <div class="card-body">
                        <div class="order-timeline">
                            <div class="timeline-item">
                                <h6 class="mb-1">订单已创建</h6>
                                <p class="timeline-date" th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</p>
                            </div>
                            
                            <div class="timeline-item" th:if="${order.paymentTime != null}">
                                <h6 class="mb-1">订单已支付</h6>
                                <p class="timeline-date" th:text="${#temporals.format(order.paymentTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:05:00</p>
                            </div>
                            
                            <div class="timeline-item" th:if="${order.sendTime != null}">
                                <h6 class="mb-1">订单已发货</h6>
                                <p class="timeline-date" th:text="${#temporals.format(order.sendTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-02 10:00:00</p>
                            </div>
                            
                            <div class="timeline-item" th:if="${order.endTime != null}">
                                <h6 class="mb-1">订单已完成</h6>
                                <p class="timeline-date" th:text="${#temporals.format(order.endTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-05 16:00:00</p>
                            </div>
                            
                            <div class="timeline-item" th:if="${order.closeTime != null}">
                                <h6 class="mb-1">订单已取消</h6>
                                <p class="timeline-date" th:text="${#temporals.format(order.closeTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 13:00:00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 订单不存在提示 -->
            <div th:if="${order == null}" class="alert alert-warning">
                <h4 class="alert-heading">订单不存在</h4>
                <p>该订单不存在或已被删除。</p>
                <hr>
                <p class="mb-0">
                    <a href="/order/list" class="btn btn-primary me-2">查看我的订单</a>
                    <a href="/" class="btn btn-outline-secondary">返回首页</a>
                </p>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        // 取消订单
        function cancelOrder() {
            if (!confirm('确定要取消订单吗？')) {
                return;
            }
            
            $.ajax({
                url: '/order/cancel',
                type: 'POST',
                data: {
                    orderNo: '[[${order != null ? order.orderNo : ""}]]'
                },
                success: function(res) {
                    if (res.code === 0) {
                        showToast('订单已取消', 'success');
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    } else {
                        showToast(res.msg || '取消订单失败', 'danger');
                    }
                },
                error: function() {
                    showToast('请求失败，请重试', 'danger');
                }
            });
        }
        
        // 显示提示
        function showToast(message, type) {
            const toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) return;
            
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'exclamation-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            
            bsToast.show();
            
            // 自动移除toast元素
            toast.addEventListener('hidden.bs.toast', function () {
                toast.remove();
            });
        }
    </script>
</body>
</html> 